<template>
	<view class="item p30 bgf r20 mt20 ml30 mr30 useAnimate" >
		<view class="title2 t-flex between">
			<view class="user t-flex between">
				<uv-image src="/static/bin.png" mode="aspectFill"
				width="90rpx"
				height="90rpx"
				radius="50%"
				></uv-image>
				<view class="right">
					<view class="f30 c3 bold">张三</view>
					<view class="tags t-flex">
						<view class="tag">轿车</view>
						<view class="tag">燃油车</view>
					</view>
				</view>
			</view>
			
			<view class="mainC">
				待付款
			</view>
			
		</view>
		
		<view class="select t-flex between pt20 pb20 pl30 pr30 r10  mt30">
			<view class="c3">预约时间</view>
			<view class="right">
				请选择 <text class="iconfont icon-sanjiaoxia"></text>
			</view>
		</view>
		
		<view class="actions t-flex between mt30">
			<view class="left f32 bold prc">￥90</view>
			
			<view class="btns t-flex">
				<view class="btn t-flex center s1">取消订单</view>
				<view class="btn t-flex center s2">立即支付</view>
			</view>
			
		</view>
		
	</view>
</template>

<script setup>
	
	
</script>

<style scoped lang="scss">
	.item{
		.title2{
			align-items: flex-start;
			.user{
				width: calc(100% - 100rpx);
				.right{
					width: calc(100% - 110rpx);
				}
				.tags{
					margin-top: 16rpx;
					.tag{
						padding: 0 16rpx;
						margin-right: 16rpx;
						height: 36rpx;
						background: #FFF8F4;
						border-radius: 4rpx;
						color: #FD541F;
						font-size: 20rpx;
					}
				}
			}
		}
	}
	.select{
		background-color: #F5F6F7;
		.right{
			width: 70%;
			text-align: right;
			.iconfont{
				color: #999;
			}
		}
	}
	
	.actions{

		.s1{
			background: #FFFFFF;
			border: 2rpx solid #EEEEEE;
			color: #666;
		}
		.s2{
			background-color: $main-color;
			color: #fff;
		}
		.btns{
			width: 80%;
			justify-content: flex-end;
			.btn{
				height: 68rpx;
				border-radius: 35rpx;
				padding: 0 38rpx;
				margin-left: 24rpx;
			}
		}
	}
	
	.prc{
		color:#FF1616;
	}
	
</style>